<template>
  <view class="course" :class="{ rotate: rotate }">
    <view class="course-wrap">
      <view class="header">
        <!-- <text>{{ scheduleConfig.name }}</text> -->
        <view class="colhead-selector" v-if="timeRange.start && timeRange.end">
          <text class="cuIcon-back" @click="changeSchedule('prev')"></text>
          <text class="current-select" @click="selectCol">{{ getTimeExplain(timeRange.start, timeRange.end) }}</text>
          <text class="cuIcon-right" @click="changeSchedule('next')"></text>
        </view>
      </view>
      <view class="course" v-if="colHeadList.length > 0">
        <view class="time-area" :style="`width:${rowLabelWidth}upx`">
          <view class="week"><view class="week-item" v-if="colHeadList.length > 0"></view></view>
          <view
            class="time-item"
            v-for="(item, index) in rowHeadList"
            :key="index"
            :class="{ 'bg-blue': scheduleConfig.row_head_key_col === 'user_no' && login_user_info.user_no === item[scheduleConfig.row_head_key_col] }"
          >
            <view class="time" v-if="item[scheduleConfig.row_head_disp_col]">{{ item[scheduleConfig.row_head_disp_col] }}</view>
          </view>
        </view>
        <view class="course-area" v-if="colHeadList.length > 0">
          <view class="week">
            <view class="week-item" v-for="(item, index) in colHeadList" :key="item.id">
              {{ item && item[scheduleConfig.col_head_disp_col] ? item[scheduleConfig.col_head_disp_col] : '' }}
            </view>
          </view>
          <view class="course-row" v-for="(row, rowIndex) in rowHeadList" :key="rowIndex">
            <grid-item
              class="course-row-item"
              v-for="(col, colIndex) in row.newRowDataList"
              :key="colIndex"
              @click.native="clickRow(col, row, colIndex, rowIndex)"
              :rowData="col"
              :colData="row.rowDataListCol"
            ></grid-item>
            <!-- <view class="course-row-item" v-for="(col, colIndex) in row.newRowDataList" :key="colIndex" @click="clickRow(col, row, colIndex, rowIndex)" :class="{ 'no-bg': !col }">
              <view class="" v-for="(column, columnIndex) in row.rowDataListCol" :key="column">
                <text v-if="col && col[column]">{{ column + '(' + col[column].length + ')' }}:</text>
                <view v-if="col && col[column] && Array.isArray(col[column])">
                  <view class="" v-for="(item, itemIndex) in col[column]" :key="itemIndex">
                    <text v-if="col[column].length > 1">{{ itemIndex + 1 + ':' }}</text>
                    {{ item && item[item['scheduleConfig']['schedule_col']] ? item[item['scheduleConfig']['schedule_col']] : '' }}
                  </view>
                </view>
              </view>
              <view v-if="!col"><text class="cuIcon-add" style="font-size: 20upx;"></text></view>
            </view> -->
          </view>
        </view>
      </view>
    </view>
    <view class="cu-modal" :class="{ show: showModal }" @click.stop.prevent="showModal = false" @touchmove.stop.prevent="clear">
      <view class="cu-dialog">
        <view class="modal-list">
          <view class="modal-title" v-if="itemData && itemData.row">
            <text
              class="row-head"
              :class="{ 'text-blue': scheduleConfig.row_head_key_col === 'user_no' && login_user_info.user_no === itemData['row'][scheduleConfig.row_head_key_col] }"
            >
              {{ itemData['row'][scheduleConfig['row_head_disp_col']] }}
            </text>
            <!--    <text class="col-head">
              {{colHeadList[itemData['colIndex']][scheduleConfig['col_head_key_col']]}}
            </text> -->
            <text class="col-head">周{{ colHeadList[itemData['colIndex']][scheduleConfig['col_head_disp_col']] }}</text>
          </view>
          <view class="page-item" v-for="(item, index) in modalList" :key="index">
            <view class="item-title">
              <view class="left">{{ item.group }} ({{ item.data.length }}):</view>
              <text class="btn bg-blue" @click="goPage(item)">进入</text>
            </view>
            <view class="item-content">
              <view class="item-list" :class="{ 'border-bottom': Array.isArray(item.data) && item.data.length > 1 }" v-for="(task, taskIndex) in item.data" :key="taskIndex">
                {{ item.data.length > 1 ? taskIndex + 1 + '.' : '1. ' }} {{ task['labelText'] }}
                <!-- {{ task[task.scheduleConfig.schedule_col] }} -->
              </view>
              <view class="margin-left" v-if="!item.data || item.data.length === 0">无</view>
            </view>
          </view>
        </view>
        <view class="padding-sm" @tap="showModal = false" style="text-align: center;font-size: 20px;">
          <!-- <text class="cuIcon-close text-red" @tap="showModal = false"></text> -->
          <button class="cu-btn bg-red" @tap="showModal = false">关闭</button>
        </view>
        <!-- 	<view class="cu-bar bg-white">
    			<view class="action margin-0 flex-sub text-green solid-left" @tap="showModal = false">取消</view>
    			<view class="action margin-0 flex-sub  solid-left" @tap="showModal = false">确定</view>
    		</view> -->
      </view>
    </view>
  </view>
</template>

<script>
const dayjs = require('dayjs');
require('dayjs/locale/zh-cn');
dayjs.locale('zh-cn');
const weekday = require('dayjs/plugin/weekday');
dayjs.extend(weekday);
import gridItem from './grid-item/grid-item.vue';
import {
  formatDate,
  getMonthDays,
  getQuarterStartMonth,
  getWeekStartDate,
  getWeekEndDate,
  getLastWeekStartDate,
  getLastWeekEndDate,
  getNextWeekStartDate,
  getNextWeekEndDate,
  getMonthStartDate,
  getMonthEndDate,
  getLastMonthStartDate,
  getLastMonthEndDate,
  getQuarterStartDate,
  getQuarterEndDate
} from '@/common/date_utils.js';
export default {
  components: {
    gridItem
  },
  data() {
    return {
      login_user_info: null,
      showCaledar: false,
      scheduleConfig: {},
      scheduleList: [], //
      colHeadList: [], // 列标签
      rowHeadList: [], //行标签
      rotate: false,
      rowLabelWidth: 70,
      scheduleItemList: [],
      showModal: false,
      modalList: [],
      itemData: {}
    };
  },
  computed: {
    timeStart() {
      if (Array.isArray(this.colHeadList) && this.colHeadList.length > 0) {
        let startDate = '';
        this.colHeadList.forEach((item, index) => {
          if (item[this.scheduleConfig.col_head_key_col] && index === 0) {
            startDate = item[this.scheduleConfig.col_head_key_col];
          }
        });
        return startDate;
      }
    },
    timeEnd() {
      if (Array.isArray(this.colHeadList) && this.colHeadList.length > 0) {
        let endDate = '';
        this.colHeadList.forEach((item, index) => {
          if (item[this.scheduleConfig.col_head_key_col] && index === this.colHeadList.length - 1) {
            endDate = item[this.scheduleConfig.col_head_key_col];
          }
        });
        return endDate;
      }
    },
    timeRange() {
      let startDate = '';
      let endDate = '';
      if (Array.isArray(this.colHeadList) && this.colHeadList.length > 0) {
        this.colHeadList.forEach((item, index) => {
          if (item[this.scheduleConfig.col_head_key_col] && index === 0) {
            startDate = item[this.scheduleConfig.col_head_key_col];
          }
          if (item[this.scheduleConfig.col_head_key_col] && index === this.colHeadList.length - 1) {
            endDate = item[this.scheduleConfig.col_head_key_col];
          }
        });
      }
      return { start: startDate, end: endDate };
    }
  },
  methods: {
    getTimeExplain(startDate, endDate) {
      const currentWeekStart = dayjs()
        .weekday(0)
        .format('YYYY-MM-DD');
      const prevWeekStart = dayjs()
        .weekday(-7)
        .format('YYYY-MM-DD');
      const nextWeekStart = dayjs()
        .weekday(7)
        .format('YYYY-MM-DD');
      switch (startDate) {
        case currentWeekStart:
          return '本周';
          break;
        case prevWeekStart:
          return '上周';
          break;
        case nextWeekStart:
          return '下周';
          break;
        default:
          return startDate + ' 至 ' + endDate;
          break;
      }
    },
    changeSchedule(operate) {
      if (this.scheduleConfig.col_head_disp_col === 'day_of_week_cn') {
        let cond = {};
        if (operate === 'prev') {
          //向前
          cond = {
            start: dayjs(this.timeStart)
              .weekday(-7)
              .format('YYYY-MM-DD'),
            end: dayjs(this.timeStart)
              .weekday(-1)
              .format('YYYY-MM-DD')
          };
        } else if (operate === 'next') {
          //向后
          cond = {
            start: dayjs(this.timeStart)
              .weekday(7)
              .format('YYYY-MM-DD'),
            end: dayjs(this.timeStart)
              .weekday(13)
              .format('YYYY-MM-DD')
          };
        }
        if (this.$route.query.no) {
          cond['no'] = this.$route.query.no;
        }
        this.getScheduleConfig(cond);
      }
    },
    goPage(e) {
      console.log(e);
      let cond = [];
      let scheduleConfig = {};
      if (e.data && e.data.length > 0) {
        scheduleConfig = e.data[0].scheduleConfig;
        cond = [
          { colName: scheduleConfig.table_col_head_col, ruleType: 'like', value: this.itemData['col'][scheduleConfig.tag][0][scheduleConfig.table_col_head_col] },
          { colName: scheduleConfig.table_row_head_col, ruleType: 'like', value: this.itemData['col'][scheduleConfig.tag][0][scheduleConfig.table_row_head_col] }
        ];
      } else if (e.scheduleConfig) {
        scheduleConfig = e.scheduleConfig;
        cond = e.cond;
      }
      // let scheduleConfig = e.scheduleConfig;

      const viewTemp = {
        title: scheduleConfig.schedule_col,
        tip: scheduleConfig.table_row_head_col,
        // img: 'img',
        // price: 'current_price',
        footer: scheduleConfig.table_col_head_col
      };
      // return;
      if (scheduleConfig.page_type && scheduleConfig.page_type === 'proc') {
        uni.navigateTo({
          url:
            '/pages/public/list/list?cond=' +
            decodeURIComponent(JSON.stringify(cond)) +
            '&serviceName=' +
            scheduleConfig.srv +
            '&pageType=proc&viewTemp=' +
            decodeURIComponent(JSON.stringify(viewTemp))
        });
        // uni.navigateTo({
        //   url: scheduleConfig.dest_page + '?proc_instance_no=' + e.proc_instance_no
        // });
      } else {
        uni.navigateTo({
          url:
            '/pages/public/list/list?cond=' +
            decodeURIComponent(JSON.stringify(cond)) +
            '&serviceName=' +
            scheduleConfig.srv +
            '&pageType=list&viewTemp=' +
            decodeURIComponent(JSON.stringify(viewTemp))
        });
      }
    },
    clickRow(col, row, colIndex, rowIndex) {
      let arr = [];
      const self = this;
      if (col && typeof col === 'object' && Object.keys(col).length > 0) {
        Object.keys(col).forEach(item => {
          let columnData = col[item];
          if (col[item] && Array.isArray(col[item])) {
            col[item].forEach(column => {
              let config = column.scheduleConfig;
              let str = '';
              config.disp_info.forEach(disp => {
                if (typeof disp === 'string') {
                  str += disp;
                } else if (typeof disp === 'object' && disp.srv_col_val) {
                  // if(disp.max_char&&Number(disp.max_char).toString()!=='NaN'){
                  //   let maxChar = Number(disp.max_char)
                  //   if(column[disp.srv_col_val].length>=maxChar){
                  //     str += column[disp.srv_col_val].slice(0,maxChar)+'...';
                  //   }else{
                  //     str += column[disp.srv_col_val];
                  //   }
                  // }else{
                  str += column[disp.srv_col_val];
                  // }
                }
              });
              column['labelText'] = str;
            });
          }
          arr.push({ group: item, data: col[item] });
        });
        let colData = this.colHeadList[colIndex];
        this.scheduleItemList.forEach(item => {
          let group = arr.map(item => item.group);
          if (!group.includes(item.config.tag)) {
            let cond = [
              { colName: item.config.table_col_head_col, ruleType: 'like', value: colData[self.scheduleConfig.col_head_key_col] },
              { colName: item.config.table_row_head_col, ruleType: 'like', value: row[self.scheduleConfig.row_head_key_col] }
            ];
            arr.push({ group: item.config.tag, data: [], scheduleConfig: item.config, cond: cond });
          }
        });
        this.modalList = arr;
        this.itemData = {
          col,
          row,
          colIndex,
          rowIndex
        };
        this.showModal = true;
      } else {
        let colData = this.colHeadList[colIndex];
        let arr = [];
        this.scheduleItemList.forEach(item => {
          let cond = [
            { colName: item.config.table_col_head_col, ruleType: 'like', value: colData[self.scheduleConfig.col_head_key_col] },
            { colName: item.config.table_row_head_col, ruleType: 'like', value: row[self.scheduleConfig.row_head_key_col] }
          ];
          arr.push({ group: item.config.tag, data: [], scheduleConfig: item.config, cond: cond });
        });
        this.modalList = arr;
        this.showModal = true;
      }
      uni.setStorageSync('activeApp', this.scheduleConfig.app);
      const serviceName = this.scheduleConfig.table.replace('bx', 'srv') + '_select';
      const viewTemp = {
        title: this.scheduleConfig.schedule_col,
        tip: this.scheduleConfig.table_row_head_col,
        footer: this.scheduleConfig.table_col_head_col
      };
      return;
      let cond = [];
      if (col && Array.isArray(col) && col.length > 0) {
        console.log(e, 'clickRow');
        cond = [
          { colName: this.scheduleConfig.table_col_head_col, ruleType: 'like', value: e[0][this.scheduleConfig.table_col_head_col] },
          { colName: this.scheduleConfig.table_row_head_col, ruleType: 'like', value: e[0][this.scheduleConfig.table_row_head_col] }
        ];
        uni.navigateTo({
          url:
            '/pages/public/list/list?cond=' +
            decodeURIComponent(JSON.stringify(cond)) +
            '&serviceName=' +
            serviceName +
            '&pageType=list&viewTemp=' +
            decodeURIComponent(JSON.stringify(viewTemp))
        });
      } else {
        const colValue = this.colHeadList[colIndex][this.scheduleConfig['col_head_key_col']];
        const rowValue = this.rowHeadList[rowIndex][this.scheduleConfig['row_head_key_col']];
        if (colValue && rowValue) {
          cond = [
            { colName: this.scheduleConfig.table_col_head_col, ruleType: 'like', value: colValue },
            { colName: this.scheduleConfig.table_row_head_col, ruleType: 'like', value: rowValue }
          ];
          const serviceName = this.scheduleConfig.table.replace('bx', 'srv') + '_add';
          uni.navigateTo({
            url: '/pages/public/formPage/formPage?serviceName=' + serviceName + '&type=add&cond=' + decodeURIComponent(JSON.stringify(cond))
          });
        } else {
          uni.showToast({
            title: '数据异常,请刷新后再进行操作',
            icon: 'none'
          });
          return;
        }
      }
    },
    selectCol() {
      uni.showToast({
        icon: 'none',
        title: `${this.timeStart}~${this.timeEnd}`
      });
    },
    change({ choiceDate, dayCount }) {
      console.log(choiceDate, dayCount);
    },
    changePopup(e) {},
    async getScheduleConfig(cond = { start: '', end: '', no: '' }) {
      // 获取排程配置数据
      const self = this;
      const url = this.getServiceUrl('daq', 'srvdaq_schedule_cfg_select', 'select');
      const req = { serviceName: 'srvdaq_schedule_cfg_select', colNames: ['*'], condition: [], order: [] };
      if (cond && cond.no) {
        req.condition = [
          {
            colName: 'no',
            value: cond.no,
            ruleType: 'eq'
          }
        ];
      }
      const res = await this.$http.post(url, req);
      if (res.data.state === 'SUCCESS' && res.data.data.length > 0) {
        this.scheduleConfig = res.data.data[0];
        document.title = this.scheduleConfig.name;
        this.getScheduleItemList(cond).then(scheduleItemList => {
          this.getRowHead().then(rowHeadList => {
            rowHeadList.forEach((row, rowIndex) => {
              // rowHeadList.forEach(item => {
              row['rowDataList'] = [];
              row['newRowDataList'] = [];
              row['rowDataList'].length = 7;
              row['newRowDataList'].length = 7;
            });
            self.getColHead(cond).then(colHeadList => {
              colHeadList.forEach((col, colIndex) => {
                self.scheduleItemList.forEach(scheduleList => {
                  scheduleList.data.forEach(schedule => {
                    rowHeadList.forEach((row, rowIndex) => {
                      if (
                        col[self.scheduleConfig.col_head_key_col] === schedule[scheduleList.config.table_col_head_col] &&
                        row[self.scheduleConfig.row_head_key_col] === schedule[scheduleList.config.table_row_head_col]
                      ) {
                        let newObj = row['newRowDataList'][colIndex] ? row['newRowDataList'][colIndex] : {};
                        if (row.user_no === 'zhangj') {
                          // debugger
                          console.log(newObj, row, col, colIndex);
                        }
                        schedule.scheduleConfig = scheduleList.config;
                        newObj[scheduleList.config.tag] && Array.isArray(newObj[scheduleList.config.tag])
                          ? newObj[scheduleList.config.tag].push(schedule)
                          : (newObj[scheduleList.config.tag] = [schedule]);
                        row['newRowDataList'][colIndex] = newObj;

                        // row['rowDataListCol'] = row['rowDataListCol'] && row['rowDataListCol'].length > Object.keys(newObj).length ? row['rowDataListCol'] : Object.keys(newObj);
                        row['rowDataListCol'] = row['rowDataListCol'] ? row['rowDataListCol'].concat(Object.keys(newObj)) : Object.keys(newObj);
                        row['rowDataListCol'] = Array.from(new Set(row['rowDataListCol']));
                      }
                      self.$set(self.rowHeadList, rowIndex, row);
                    });
                  });
                });
              });
            });
          });
        });

        return;
        //   this.getScheduleList(cond).then(scheduleList => {
        //     this.getRowHead()
        //       .then(rowHeadList => {
        //         rowHeadList.forEach(item => {
        //           item['rowDataList'] = [];
        //           item['rowDataList'].length = 7;
        //         });
        //       })
        //       .then(() => {
        //         this.getColHead(cond).then(colHeadList => {
        //           colHeadList.forEach((col, colIndex) => {
        //             this.scheduleList.forEach(schedule => {
        //               this.rowHeadList.forEach((row, rowIndex) => {
        //                 if (
        //                   col[this.scheduleConfig.col_head_key_col] === schedule[this.scheduleConfig.table_col_head_col] &&
        //                   row[this.scheduleConfig.row_head_key_col] === schedule[this.scheduleConfig.table_row_head_col]
        //                 ) {
        //                   Array.isArray(row['rowDataList'][colIndex]) ? row['rowDataList'][colIndex].push(schedule) : (row['rowDataList'][colIndex] = [schedule]);
        //                   console.log(schedule, col, rowIndex);
        //                 } else if (row[this.scheduleConfig.row_head_key_col] === schedule[this.scheduleConfig.table_row_head_col]) {
        //                   if (schedule[this.scheduleConfig.table_col_head_col].indexOf(col[this.scheduleConfig.col_head_key_col]) !== -1) {
        //                     Array.isArray(row['rowDataList'][colIndex]) ? row['rowDataList'][colIndex].push(schedule) : (row['rowDataList'][colIndex] = [schedule]);
        //                   }
        //                 }
        //                 this.$set(this.rowHeadList, rowIndex, row);
        //               });
        //             });
        //           });
        //         });
        //       });
        //   });
      }
    },
    async getScheduleItemList(cond = { start: '', end: '', no: '' }) {
      const scheduleConfig = this.deepClone(this.scheduleConfig);
      let schedule_item_cfg = scheduleConfig.schedule_item_cfg;
      if (schedule_item_cfg && typeof schedule_item_cfg === 'string') {
        schedule_item_cfg = JSON.parse(schedule_item_cfg);
      }
      let scheduleItemList = [];
      let weekStart = getWeekStartDate();
      let weekEnd = getWeekEndDate();
      if (schedule_item_cfg && Array.isArray(schedule_item_cfg)) {
        for (let i of schedule_item_cfg) {
          const url = this.getServiceUrl(i['app'], i['srv'], 'select');
          const req = (req = {
            serviceName: i['srv'],
            colNames: ['*'],
            condition: [{ colName: i['table_col_head_col'], ruleType: 'between', value: [cond.start ? cond.start : weekStart, cond.end ? cond.end : weekEnd] }]
          });
          const res = await this.$http.post(url, req);
          if (res.data.state === 'SUCCESS') {
            scheduleItemList.push({
              config: i,
              data: res.data.data
            });
          }
        }
      }
      this.scheduleItemList = scheduleItemList;
      return scheduleItemList;
    },
    async getScheduleList(cond = { start: '', end: '', no: '' }) {
      const scheduleConfig = this.scheduleConfig;
      let serviceName = '';
      if (scheduleConfig.table) {
        serviceName = scheduleConfig.table.replace('bx', 'srv') + '_select';
        console.log('serviceName', serviceName);
        const url = this.getServiceUrl(scheduleConfig.app, serviceName, 'select');
        let weekStart = getWeekStartDate();
        let weekEnd = getWeekEndDate();
        const req = {
          serviceName: serviceName,
          colNames: ['*'],
          condition: [{ colName: this.scheduleConfig.table_col_head_col, ruleType: 'between', value: [cond.start ? cond.start : weekStart, cond.end ? cond.end : weekEnd] }],
          order: []
        };
        const res = await this.$http.post(url, req);
        if (res.data.state === 'SUCCESS') {
          console.log('aaa', res.data.data);
          this.scheduleList = res.data.data;
          return res.data.data;
        }
      }
    },
    async getColHead(cond = { start: '', end: '' }) {
      const scheduleConfig = this.scheduleConfig;
      const url = this.getServiceUrl(scheduleConfig.col_head_app, scheduleConfig.col_head_service, 'select');
      let weekStart = getWeekStartDate();
      let weekEnd = getWeekEndDate();
      const req = {
        serviceName: scheduleConfig.col_head_service,
        colNames: ['*'],
        condition: [{ colName: this.scheduleConfig.col_head_key_col, ruleType: 'between', value: [cond.start ? cond.start : weekStart, cond.end ? cond.end : weekEnd] }],
        order: []
      };

      const res = await this.$http.post(url, req);
      if (res.data.state === 'SUCCESS') {
        let list = res.data.data.map(item => item[scheduleConfig.col_head_disp_col]);
        this.colHeadList = res.data.data;
        console.log('bbb', res.data.data, list);
        return res.data.data;
      }
    },
    async getRowHead(rowHead) {
      const scheduleConfig = this.scheduleConfig;
      const url = this.getServiceUrl(scheduleConfig.row_head_app, scheduleConfig.row_head_service, 'select');
      const req = {
        serviceName: scheduleConfig.row_head_service,
        colNames: ['*']
      };
      if (this.scheduleConfig.row_head_srv_cond) {
        let cond = this.scheduleConfig.row_head_srv_cond;
        if (typeof cond === 'string') {
          cond = JSON.parse(cond);
        }
        req.condition = cond;
        //   req.condition = JSON.parse(this.scheduleConfig.row_head_srv_cond);
      }
      const res = await this.$http.post(url, req);
      if (res.data.state === 'SUCCESS') {
        let list = res.data.data.map(item => item[scheduleConfig.col_head_disp_col]);
        list = [...new Set(list)];
        this.rowHeadList = res.data.data;
        return this.rowHeadList;
      }
    },
    clear(e) {
      // TODO nvue 取消冒泡
      e.stopPropagation();
    }
  },
  watch: {
    scheduleConfig: {
      deep: true,
      handler(newValue, oldValue) {
        if (newValue.schedule_item_cfg && typeof newValue.schedule_item_cfg === 'string') {
          this.scheduleConfig.schedule_item_cfg = JSON.parse(newValue.schedule_item_cfg);
        }
        if (newValue.row_head_srv_cond && typeof newValue.row_head_srv_cond === 'string') {
          this.scheduleConfig.row_head_srv_cond = JSON.parse(newValue.row_head_srv_cond);
        }
      }
    },
    rowHeadList: {
      deep: true,
      handler(newValue, oldValue) {}
    }
  },
  mounted() {
    if (uni.getStorageSync('login_user_info')) {
      this.login_user_info = uni.getStorageSync('login_user_info');
    }
  },
  onShow() {
    if (this.$route.query.no) {
      this.getScheduleConfig({ no: this.$route.query.no });
    } else {
      this.getScheduleConfig();
    }
  },
  created() {
    // this.getScheduleConfig();
  }
};
</script>

<style lang="scss">
.rotate {
  transform: rotate(90deg);
}
.cu-dialog {
  width: 96%;
  height: auto;
  left: 2%;
  min-height: 500upx;
  background-color: #fff;
  // background-color: #e54d42;
  // color: #fff;
  .modal-list {
    display: flex;
    // justify-content: space-around;
    padding: 0 20upx 20upx;
    flex-direction: column;
    // background-color: #fff;
    .modal-title {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30upx;
      height: 60upx;
      .col-head {
        margin: 0 20upx;
      }
    }
    .page-item {
      padding: 20upx 0 10upx;
      // border-bottom: 1px solid #fff;
      .item-title {
        color: #333;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10upx;
        letter-spacing: 2upx;
        .left {
          display: flex;
          align-items: center;
          border-left: 3px solid #e54d42;
          text-indent: 20upx;
          font-weight: 600;
          color: #666;
        }
        .btn {
          margin-top: 5upx;
          padding: 10upx 10upx 10upx 20upx;
          letter-spacing: 10upx;
          border-radius: 10upx;
        }
      }
      .item-content {
        // background-color: #e54d42;
        padding-left: 40upx;
        font-size: 32upx;
        .item-list {
          padding-bottom: 10upx;
          line-height: 60upx;
        }
        .item-list.border-bottom {
          // border-bottom: 1px solid #fff;
          &:last-child {
            border: none;
          }
        }
      }
    }
  }
}
.course-wrap {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  min-height: 100vh;
  padding-top: 80upx;
  // max-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  .header {
    font-size: 32upx;
    line-height: 80upx;
    text-align: center;
    background-color: #2980b9;
    color: #fff;
    display: flex;
    justify-content: center;
    position: fixed;
    top: 0;
    width: 100%;
    max-width: 1000px;
    .colhead-selector {
      min-width: 80%;
      display: flex;
      justify-content: space-around;
      .current-select {
        display: inline-block;
        margin: 0 10upx;
        min-width: 100upx;
        text-align: center;
      }
    }
  }
  .week {
    display: flex;
    background-color: #2980b9;
    color: #efefef;
    .week-item {
      min-width: 150upx;
      width: 150upx;
      flex: 1;
      height: 40upx;
      text-align: center;
      background-color: #2980b9;
    }
  }
  .course {
    display: flex;
    background-color: #fff;
    // overflow: scroll;
    // flex-direction: column;
    margin-bottom: 20upx;
    .time-area {
      display: flex;
      flex-direction: column;
      .week {
        margin: 0;
        padding: 0;
        height: 40upx;
        margin-bottom: 10upx;
      }
      .time-item {
        height: 200upx;
        margin-bottom: 2px;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        .index {
          font-size: 30upx;
          line-height: 40upx;
        }
        .time {
          overflow: hidden;
          writing-mode: vertical-rl;
          display: flex;
          align-items: center;
          justify-content: space-between;
          letter-spacing: 5px;
        }
      }
    }

    .course-area {
      flex: 1;
      overflow: scroll;
      // padding-top: 25px;
      .week {
        margin-bottom: 10upx;
        // position: fixed;
        // top: 40px;
      }
    }

    .course-row {
      display: flex;
      width: 15 0%;
      flex: 1;
      .course-row-item {
        overflow-y: scroll;
        box-sizing: border-box;
        min-width: calc(150upx - 2px);
        font-size: 20upx;
        height: 200upx;
        margin-left: 2px;
        margin-bottom: 2px;
        padding: 5px;
        background-color: rgba($color: #e64340, $alpha: 0.5);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        color: #fff;
        flex: 1;
        &:first-child {
          background-color: rgba($color: #e74c3c, $alpha: 0.8);
        }
        &:nth-child(2) {
          background-color: rgba($color: #1abc9c, $alpha: 0.8);
        }
        &:nth-child(3) {
          background-color: rgba($color: #2ecc71, $alpha: 0.8);
        }
        &:nth-child(4) {
          background-color: rgba($color: #3498db, $alpha: 0.8);
        }
        &:nth-child(5) {
          background-color: rgba($color: #f1c40f, $alpha: 0.8);
        }
        &:nth-child(6) {
          background-color: rgba($color: #00b294, $alpha: 0.8);
        }
        &.no-bg {
          background-color: rgba($color: #efefef, $alpha: 0.5);
          // border: 1px dashed #efefef;
          color: rgba($color: #333, $alpha: 0.5);
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
}
</style>
